<template>

      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        :default-active="route.path"

        text-color="#fff"
      
      >
      <h3>后台管理页面</h3>
      <el-menu-item
      v-for="item in noChildren"
      :index="item.path"
      :key="item.path"
      @click="goToHanlder(item.path)"
      >
      <component class="icons" :is="item.icon"></component>
      <span>{{ item.label }}</span>
      </el-menu-item>
        

        <el-sub-menu
        v-for="item in hasChildren"
        :index="item.path"
        :key="item.path"
        >
          <template #title>
            <component class="icons" :is="item.icon"></component>
            <span>{{ item.label }}</span>
          </template>
          <el-menu-item-group >
            <el-menu-item 
            v-for="subItem in item.children"
            :index="subItem.path"
            :key="subItem.path"
            @click="() => router.push(subItem.path)"
            >
            <component class="icons" :is="subItem.icon"></component>
            <span>{{ subItem.label }}</span>
            </el-menu-item>
            
          </el-menu-item-group>

        </el-sub-menu>

      </el-menu>

</template>


<script setup>
import {useRouter} from 'vue-router'
import {ref ,computed} from 'vue'
import {useRoute} from 'vue-router'

const router = useRouter()

const route = useRoute()


const menus = ref([
  {
        path: '/index', 
        label: '首页' ,
        name: 'home' ,
        icon:'house' ,
    },
    {
        path: '/book', 
        name: 'book' ,
        label: '图书管理' ,
        icon:'notebook' ,
    },
    {
        path: '/user', 
        name: 'user' ,
        label: '用户管理' ,
        icon:'user' ,
    },

    {
        path: '/other',
        label: '其它页面',
        icon:'location',
        children:[
            {

                path: '/other/page1',
                name:'page1' ,
                label:'页面一' ,
                icon:'setting',
                url:'PageOne'
            },
            {
                path: '/other/page2',
                name:'page2' ,
                label:'页面二' ,
                icon:'setting',
                url:'PageTwo'
            }
        
        ]

    }

])


const goToHanlder = (path) => {
    return router.push(path)
}


//计算属性 

// 将某个数据 进行计算操作后 返回一个新的数据
// 里面写 你要操作的数据 返回的结果
// 

const noChildren = computed(() => menus.value.filter(item => !item.children) )

const hasChildren = computed(() => menus.value.filter(item => item.children) )





</script>

<style scoped>
.icons{
  width: 18px;
  height: 18px;

  margin-right: 5px;
}

.el-menu{
  border-right: none;
  height: 800px;
  width: 180px;


}  

h3{
    text-align: center;
    color: white;
    
  }
</style>